<script setup>
import { ref, onMounted } from 'vue'
const numlist = ref([0, 0, 0, ',', 0, 4, 5])
import * as echarts from 'echarts'
onMounted(() => {
  var chartDom = document.getElementById('main')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    tooltip: {
      show: false,
      trigger: 'item'
    },
    legend: {
      orient: 'vertical', // 垂直排列图例
      left: 'left', // 图例显示在左边
      top: 'center', // 图例居中
      itemGap: 30,
      textStyle: {
        color: '#fff', // 设置 legend 文本的颜色
        fontSize: 12
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: true, // 显示标签文字
          position: 'outside', // 设置标签位置为外部
          fontSize: 12,
          color: '#fff',
          formatter: function (params) {
            return ((100 * params.value) / 45).toFixed(2) + '%' // 显示名称和对应的值
          }
        },
        labelLine: {
          show: true, // 显示连接线
          length: 20, // 设置线的长度
          length2: 30, // 设置第二段线的长度
          smooth: true // 设置线条平滑
        },
        itemStyle: {
          // 这里设置每个饼图扇区的颜色
          normal: {
            color: function (params) {
              var colors = ['#2F9DFF', '#3CE4E8', '#FFF4A0'] // 自定义颜色数组
              return colors[params.dataIndex]
            }
          }
        },
        data: [
          { value: 6, name: '上游企业' },
          { value: 5, name: '中游企业' },
          { value: 34, name: '下游企业' }
        ]
      }
    ]
  }

  option && myChart.setOption(option)
})
</script>

<template>
  <div class="card">
    <CommonTitle title="产业总览" />
    <div class="content">
      <p class="title">
        低空企业数量
        <span v-for="(item, index) in numlist" :key="index"
          ><b>{{ item }}</b></span
        >
        <i>家</i>
      </p>
      <div class="chartbox" id="main"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card {
  margin-top: 20px;

  .content {
    padding: 10px;
    .title {
      display: flex;
      align-items: center;

      span {
        width: 30px;
        height: 30px;
        background: url('@img/industry/num_bg.png');
        background-size: 100% 100%;
        margin: 0 5px;
        text-align: center;
        line-height: 30px;

        b {
          font-size: 28px;
          background: linear-gradient(180deg, #ffffff 29%, #00d5ff 74%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          text-fill-color: transparent;
        }
      }

      i {
        color: #2f9cff;
        font-style: normal;
      }
    }

    .chartbox {
      width: 100%;
      height: 240px;
      margin-top: 10px;
    }
  }
}
</style>
